<template>
  <view>
    <view style="width:100%; text-align: center;">
      <view class="uni-form-item uni-column">
        <input class="uni-input" name="key" v-model="form.key" @input="textChange"
               placeholder="昵称或者八字" />
      </view>
      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-db">
            <picker @change="riganChange" :value="index" :range="dayGans">
              <view class="uni-input">{{form.dayGan}}</view>
            </picker>
          </view>
          <view class="uni-list-cell-db">
            <picker @change="yuelingChange" :value="index" :range="yueLings">
              <view class="uni-input">{{form.yueLing}}</view>
            </picker>
          </view>
          <view class="uni-list-cell-db">
            <picker @change="shichenChange" :value="index" :range="shiChens">
              <view class="uni-input">{{form.timeZhi}}</view>
            </picker>
          </view>
        </view>
      </view>
      <!--			<view class="uni-list">-->
      <!--				<view class="uni-list-cell">-->
      <!--&lt;!&ndash;					<view class="uni-list-cell-left">&ndash;&gt;-->
      <!--&lt;!&ndash;						选择月令&ndash;&gt;-->
      <!--&lt;!&ndash;					</view>&ndash;&gt;-->
      <!--					<view class="uni-list-cell-db">-->
      <!--						<picker @change="yuelingChange" :value="index" :range="yueLings">-->
      <!--							<view class="uni-input">{{form.yueLing}}</view>-->
      <!--						</picker>-->
      <!--					</view>-->
      <!--				</view>-->
      <!--			</view>-->
      <!--			<view class="uni-list">-->
      <!--				<view class="uni-list-cell">-->
      <!--					<view class="uni-list-cell-left">-->
      <!--						选择时辰-->
      <!--					</view>-->
      <!--					<view class="uni-list-cell-db">-->
      <!--						<picker @change="shichenChange" :value="index" :range="shiChens">-->
      <!--							<view class="uni-input">{{form.timeZhi}}</view>-->
      <!--						</picker>-->
      <!--					</view>-->
      <!--				</view>-->
      <!--			</view>-->
      <view class="uni-btn-v">
      </view>
      <uni-list :border="true" style="text-align: left;">
        <uni-list-chat clickable v-for="(item, index) in this.data.mp.records" :key="item.id" :avatar-circle="true" :title="item.name"
                       avatar="/static/logo.jpg" :note="item.bazi" :time="formattedCreateTime(item.createTime)" @click="showDrawer(index)">
        </uni-list-chat>
      </uni-list>
      <uni-drawer ref="showRight" mode="left" :width="320" :mask-click="true">
        <uni-section class="mb-10" title="经历详情" @click="myCopy()"></uni-section>
        <scroll-view style="height: 80%;" scroll-y="true">
          <view style="text-align: left;font-size: 24px">{{content}}</view>
        </scroll-view>
      </uni-drawer>
      <uni-pagination :total="data.mp.total" title="标题文字" :current="current" @change="changePage" />
      <view>
      </view>
      <text class="example-info">当前页：{{ data.mp.current }}，数据总量：{{ data.mp.total }}条，每页数据：{{ data.mp.size }}</text>
      <view style="height: 5px;">
      </view>
      <a style="text-decoration:none" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2023036300号-1 </a>

      <uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
    </view>
    <view class="uni-btn-v">
      <button form-type="submit" type="primary" @click="toHome()">回首页</button>
<!--      <button type="simple" @click="draw">抽奖</button>-->

    </view>
  </view>
</template>

<script>
import axios from 'axios'
import { parseISO, format } from 'date-fns';

import {
  ref,
  onMounted
} from 'vue';

export default {
  created() {
    // 在组件创建时加载数据
    this.search();
  },
  mounted() {
    // 在组件创建时加载数据
    this.search();
  },
  data() {
    return {
      "index": 0,
      "dayGans": ["不选日干", "甲日干", "乙日干", "丙日干", "丁日干", "戊日干", "己日干", "庚日干", "辛日干", "壬日干", "癸日干"],
      "yueLings": ["不选月令", "子月", "丑月", "寅月", "卯月", "辰月", "巳月", "午月", "未月", "申月", "酉月", "戌月", "亥月"],
      "shiChens": ["不选时辰", "子时", "丑时", "寅时", "卯时", "辰时", "巳时", "午时", "未时", "申时", "酉时", "戌时", "亥时"],
      form: {
        "key": "",
        "dayGan": "选择日干",
        "yueLing": "选择月令",
        "timeZhi": "选择时辰",
        pageNo: 1,
        pageSize: 5
      },
      content: "",
      bz: "",
      current: 1,
      pageSize: 5,
      total: 50,
      data: {
        "mp": {
          "records": [],
          "total": 0,
          "size": 5,
          "current": 1,
          "orders": [],
          "optimizeCountSql": true,
          "searchCount": true
        },
        "members": []
      }
    }
  },
  methods: {
    textChange: function (e) {
      this.search();
    },
    toHome: function (e) {
      this.$router.push({
        path: '/pages/component/index/index2'
      });
    },
    formattedCreateTime(createTime) {
      const date = parseISO(createTime);

      const formattedDate = format(date, 'MM-dd');
      const formattedHour = String(date.getHours()).padStart(2, '0') + '点';

      // 最后组合成你需要的格式
      return `${formattedDate} ${formattedHour}`;
    },
    draw: function (e) {
      window.location.href = 'http://zhixiaoyixue.com:81/draw.html';

    },
    riganChange: function (e) {
      this.form.dayGan = this.dayGans[e.detail.value];
      this.search();
    },
    yuelingChange: function (e) {
      this.form.yueLing = this.yueLings[e.detail.value];
      this.search();
    },
    shichenChange: function (e) {
      this.form.timeZhi = this.shiChens[e.detail.value];
      this.search();
    },
    open() {
      this.$refs.popup.open('top')
    },
    close() {
      this.$refs.popup.close()
    },
    myCopy() {
      uni.setClipboardData({
        data: this.content,
        success: function () {
          console.log('复制成功');
          // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: function () {
          console.log('复制失败');
          // 可以添加错误处理或用户友好的提示
        }
      });
    },
    replaceAll(string, search, replace) {
      return string.split(search).join(replace);
    },
    showDrawer: function (index) {
      let record = this.data.mp.records[index];
      this.content = record.no;
      let t = record.taiYangTime;
      t = t.substring(0, 16)
      // this.bz = this.replaceAll(record.bz, " ", "")
      uni.setClipboardData({
        data: t,
        success: function () {
          console.log('复制八字成功');
          // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
          uni.showToast({
            title: '复制八字成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: function () {
          console.log('复制失败');
          // 可以添加错误处理或用户友好的提示
        }
      });
      this.$refs.showRight.open();
    },
    closeDrawer() {
      this.$refs.showRight.close();
    },
    search: async function (e) {
      console.log(JSON.stringify(this.form))

      const fetchData = async () => {
        try {
          console.log("send request...2");
          const response = await axios.get('https://zhixiaoyixue.com:86/list', {
            params: this.form
          });

          console.log(response.data);
          this.data = response.data;
        } catch (error) {
          console.error('Fetch error:', error);
        }
      };

      console.log("send request...1");
      try {
        await fetchData();
      } catch (err) {
      }
    },
    changePage: function (e) {
      this.current = e.current;
      this.form.pageNo = e.current;

      this.search();
    }
  }
}
</script>

<style>

</style>